<!DOCTYPE html>
<html lang="zh">

<head th:replace="/fragment/head::user-head(~{::title},~{})">
    <title>关于我</title>
</head>

<body>
    <div id="app">
        <nav th:replace="/fragment/nav::nav1"></nav>

        <div class="ui container">
            <div class="ui grid stackable">
                <div class="eleven wide column">
                    <img th:src="@{/res/image/bg.png}" alt="" class="ui rounded image">
                </div>
                <div class="five wide column">
                    <div class="ui segment">
                        <a href="/user/manage">
                            <div class="ui header">关于我
                                <img class="ui circular icon button" :src="`/res/image/${info2.avatar}`" alt="头像"
                                    style="width: 2em;" />
                            </div>
                        </a>
                    </div>
                    <div class="ui segment">
                        <p>{{info2.brief}}</p>
                    </div>
                    <div class="ui segment">
                        <show-favorites v-for="e in favorites" :favorite="e"></show-favorites>
                    </div>
                    <div class="ui segment">
                        <show-labels v-for="e in labels" :label="e"></show-labels>
                    </div>
                    <div class="ui segment">
                        <a href="" class="ui circular icon button"><i class="github icon"></i></a>
                        <a href="" class="ui circular icon button"><i class="weixin icon"></i></a>
                        <a href="" class="ui circular icon button"><i class="qq icon"></i></a>
                    </div>

                </div>
            </div>
        </div>

        <footer th:replace="/fragment/footer::f1"></footer>
    </div>

    <script th:replace="/fragment/script::jquery"></script>
    <script th:replace="/fragment/script::semantic"></script>
    <script th:replace="/fragment/script::mobile-hide"></script>
    <script th:replace="/fragment/script::vue"></script>
    <template id="show-labels">
        <a :href="`/user/labels/${label.lid}`">
            <div class="ui red basic label">{{label.name}}</div>
        </a>
    </template>
    <template id="show-favorites">
        <a :href="`/user/favorites/${favorite.fid}`">
            <div class="ui teal basic label">{{favorite.name}}</div>
        </a>
    </template>
    <script>
        const ajax = {
            data() {
                return {
                    info1: {},
                    info2: {},
                    labels: [],
                    favorites: []
                }
            },
            mounted() {
                getJson('/getUserInfo/[[${session.uid}]]', (r) => {
                    this.info2 = r.info2;
                    this.info1 = r.info1;
                });
                getJson('/getLabels', (r) => {
                    this.labels = r.list;
                })
                getJson('/getFavorites/[[${session.uid}]]', (r) => {
                    this.favorites = r.list;
                })
            }
        }

        const app = Vue.createApp(ajax)

        app.component('show-favorites', {
            props: ['favorite'],
            template: '#show-favorites'
        }).component('show-labels', {
            props: ['label'],
            template: '#show-labels'
        })
        app.mount('#app')
    </script>
</body>

</html>